import Link from "next/link";
import { Layout } from "@/components/layout";

export default function Home() {
  return (
    <Layout>
      <div className="bg-gradient-bg min-h-screen">
        {/* 英雄区域 */}
        <section className="relative overflow-hidden py-20 lg:py-32 z-10">
          <div className="container mx-auto px-4">
            <div className="text-center max-w-4xl mx-auto">
              <h1 className="text-4xl lg:text-6xl font-bold text-foreground mb-6 animate-fadeIn">
                欢迎来到
                <span className="text-gradient"> 云栖大会 2025</span>
              </h1>
              <p className="text-xl text-muted mb-8 leading-relaxed animate-fadeIn">
                基于智能用户画像的个性化日程推荐系统，为您定制专属的参会体验。
                <br />
                让每一场会议都物超所值，让每一分钟都充满收获。
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fadeIn relative z-20">
                <Link href="/profile" className="btn btn-primary px-8 py-3 text-lg relative z-30">
                  🚀 开始构建个人画像
                </Link>
                <Link href="/recommendations" className="btn btn-outline px-8 py-3 text-lg relative z-30">
                  🎯 查看推荐日程
                </Link>
              </div>
            </div>
          </div>
          
          {/* 背景装饰 */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
          <div className="absolute top-1/4 right-1/4 w-64 h-64 bg-secondary/5 rounded-full blur-2xl pointer-events-none"></div>
        </section>

        {/* 特色介绍 */}
        <section className="pt-8 pb-20 bg-surface">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-foreground mb-6">
                为什么选择我们？
              </h2>
              <p className="text-xl text-muted max-w-4xl mx-auto leading-relaxed">
                我们使用先进的AI算法，结合您的个人偏好和专业背景，为您推荐最合适的会议日程
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="card card-interactive text-center">
                <div className="text-4xl mb-4">🧠</div>
                <h3 className="text-xl font-semibold text-foreground mb-3">智能画像构建</h3>
                <p className="text-muted leading-relaxed">
                  通过多维度问卷分析，精准捕捉您的技术偏好、经验水平和参会目标
                </p>
              </div>
              
              <div className="card card-interactive text-center">
                <div className="text-4xl mb-4">🎯</div>
                <h3 className="text-xl font-semibold text-foreground mb-3">精准推荐算法</h3>
                <p className="text-muted leading-relaxed">
                  基于内容匹配、时间偏好、热度评分等多重因素，智能推荐相关日程
                </p>
              </div>
              
              <div className="card card-interactive text-center">
                <div className="text-4xl mb-4">⚡</div>
                <h3 className="text-xl font-semibold text-foreground mb-3">冲突智能检测</h3>
                <p className="text-muted leading-relaxed">
                  自动检测时间冲突和地点距离，提供优化建议，确保日程合理性
                </p>
              </div>
            </div>
          </div>
        </section>

      </div>
    </Layout>
  );
}
